<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>
    <link rel="shortcut icon" href="https://www.itsource.cn/img/logo_small.jpg">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>确认订单</title>

    <link type="text/css" rel="stylesheet" href="css/common.css">
    <link type="text/css" rel="stylesheet" href="css/flow.css">
    <!--整站改色 _start-->
    <link type="text/css" rel="stylesheet" href="css/color-style.css">
    <!--整站改色 _end-->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/layer.js"></script>
    <link rel="stylesheet" href="css/layer.css" id="layuicss-skinlayercss">
    <script type="text/javascript" src="js/jquery.method.js"></script>

    <script type="text/javascript" src="js/plugins/vue/dist/vue.js"></script>
    <script type="text/javascript" src="js/plugins/axios/dist/axios.js"></script>
    <script type="text/javascript" src="js/axios.common.js"></script>
    <link rel="stylesheet" href="js/jqueryAlert/alert.css">
    <script src="js/jqueryAlert/alert.js"></script>
</head>

<body>
<div id="myBody">
    <div id="bg" class="bg" style="display: none;"></div>

    <div class="header-top">
        <div class="header-box">

            <!-- 站点 -->
            <!--站点 start-->
            <div class="SZY-SUBSITE">

            </div>
            <!--站点 end-->
            <font id="login-info" class="login-info SZY-USER-NOT-LOGIN">
                <a class="login color" href="http://user.ymcc.com:6003/login.html" target="_top">请登录</a>
                <a class="register" href="http://user.ymcc.com:6003/register.html" target="_top">免费注册</a>
            </font>
            <font id="login-info" class="login-info SZY-USER-ALREADY-LOGIN" style="display: none;">
                <em>
                    <a href="user.html" target="_blank" class="color SZY-USER-NAME"></a>
                    <!--欢迎您回来!-->
                </em>
                <a href="site/logout" data-method="post">退出</a>
            </font>

            <ul>
                <li>
                    <a class="menu-hd home" href="http://course.ymcc.com:6002/index.html" target="_top">
                        <i></i> 源码云课堂首页
                    </a>
                </li>
                <li class="menu-item">
                    <div class="menu">
                        <a class="menu-hd myinfo" href="http://user.ymcc.com:6003/user.home.html" target="_blank">
                            <i></i> 会员中心
                            <b></b>
                        </a>
                    </div>
                </li>
                <li class="menu-item cartbox">
                    <div class="menu">
                        <a class="menu-hd cart" href="cart.html" target="_top">
                            <i></i> 购物车
                            <span class="SZY-CART-COUNT">0</span>
                            <b></b>
                        </a>
                        <div id="menu-4" class="menu-bd cart-box-main">
                            <span class="menu-bd-mask"></span>
                            <div class="dropdown-layer">
                                <div class="spacer"></div>
                                <div class="dropdown-layer-con cartbox-goods-list">

                                    <!-- 正在加载 -->
                                    <div class="cart-type">
                                        <i class="cart-type-icon"></i>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </li>

                <li class="menu-item">
                    <div class="menu">
                        <a class="menu-hd we-chat" href="" target="_top">
                            <i></i> 关注源码云课堂
                            <b></b>
                        </a>
                        <div id="menu-5" class="menu-bd we-chat-qrcode">
                            <span class="menu-bd-mask"></span>
                            <a target="_top">
                                <img src="img/test/mall_wx_qrcode_0.jpg" alt="官方微信">
                            </a>
                            <p class="font-14">关注官方微信</p>
                        </div>
                    </div>
                </li>

                <li class="menu-item">
                    <div class="menu">
                        <a href="" class="menu-hd site-nav" target="_blank">
                            更多支持
                            <b></b>
                        </a>
                        <div id="menu-7" class="menu-bd site-nav-main">
                            <span class="menu-bd-mask"></span>
                            <div class="menu-bd-panel">
                                <div class="site-nav-con">

                                    <a href="article/info?id=38" target="_blank" title="新手上路">新手上路</a>

                                    <a href="article/info?id=38" target="_blank" title="支付方式">支付方式</a>

                                    <a href="article/list/3.html" target="_blank" title="配送服务">配送服务</a>

                                    <a href="article/list/4.html" target="_blank" title="售后服务">售后服务</a>

                                    <a href="article/info?id=38" target="_blank" title="商家合作">商家合作</a>

                                    <a href="list.html?cat_id=17" target="_blank" title="店铺街">店铺街</a>

                                </div>
                            </div>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
    </div>


    <script type="text/javascript">
        $(document).ready(function () {
            $(".SZY-SEARCH-BOX-TOP .SZY-SEARCH-BOX-SUBMIT-TOP").click(function () {
                if ($(".search-li-top.curr").attr('num') == 0) {
                    var keyword_obj = $(this).parents(".SZY-SEARCH-BOX-TOP").find(".SZY-SEARCH-BOX-KEYWORD");

                    var keywords = $(keyword_obj).val();
                    if ($.trim(keywords).length == 0 || $.trim(keywords) == "请输入关键词") {
                        keywords = $(keyword_obj).data("searchwords");
                    }
                    $(keyword_obj).val(keywords);
                }
                $(this).parents(".SZY-SEARCH-BOX-TOP").find(".SZY-SEARCH-BOX-FORM").submit();
            });
        });
    </script>
    <!-- 引入上方导航条文件 -->
    <div class="header">
        <div class="w990">
            <div class="logo-info">
                <a href="#" class="logo">
                    <img src="./img/test/mall_logo_0.png">
                </a>
            </div>
            <div class="cart-progress">
                <ul>

                    <li class="finish finish-01">
                        <i>1</i>
                        <span>
						<a href="#checkout.html">购买课程</a>
					</span>
                        <b></b>
                    </li>
                    <li class="finish finish-02">
                        <i>2</i>
                        <span>确认订单</span>
                        <b></b>
                    </li>
                    <li class="finish">
                        <i>3</i>
                        <span>付款</span>
                        <b></b>
                    </li>
                    <li class="finish">
                        <i>4</i>
                        <span>支付成功</span>
                        <b></b>
                    </li>

                </ul>
            </div>
        </div>
    </div>

    <div class="content-bg">
        <div class="content-main w990">
            <div class="content-info">
                <!-- 所有店铺商品清单 -->
                <div class="goods-list border-line">
                    <div class="main-content">
                        <h2 class="title">商品清单</h2>
                        <div class="order-goods">
                            <!-- 根据店铺对商品进行拆单 每个table是一个店铺的商品 _star-->
                            <table cellpadding="0" cellspacing="0" border="0" width="100%" class="order-goods-list">
                                <tbody>
                                <tr>
                                    <th class="goods-title">
                                        <div class="order-body">
                                            <div class="shop">
                                                <div class="shop-info">
															<span class="shop-icon">
										<img src="./img/test/shop-icon2.png">
									</span>
                                                    <span class="shop-name">平台：</span>
                                                    <a href="#shop/7.html" target="_blank" title="">源码云课堂</a>
                                                    <span class="shop-customer">
										<!-- 客服 -->

										<a href="javascript:;" class="ww-light service-online" data-shop_id="7"><img
                                                src="./img/test/openim.png" width="20" height="20" border="0"
                                                alt="在线客服"></a>

									</span>
                                                </div>
                                            </div>
                                        </div>
                                    </th>
                                    <th class="goods-price">价格</th>
                                    <th class="goods-amount">时长(分钟)</th>
                                    <th class="goods-sum">观看截止</th>
                                    <th class="goods-postage">配送方式</th>
                                </tr>
                                <tr>
                                    <td colspan="4" class="goods-content">
                                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                            <!-- 如果该商品有赠品，那么当前商品的tr的class="have-gift" _star-->
                                            <tbody>
                                            <tr class="goods_34 " v-for="c in courses">
                                                <td class="goods-img">
                                                    <a href="#254" title="" target="_blank" class="img">
                                                        <img :src="c.pic" width="50" height="50">
                                                    </a>

                                                </td>
                                                <td class="goods-master">
                                                    <p class="item-title">
                                                        <a href="#254.html" target="_blank"
                                                           :title="c.name">

                                                            {{c.name}}
                                                        </a>
                                                    </p>
                                                    <div class="item-other-info">
                                                        <div class="promo-logos"></div>
                                                        <div class="item-icon-list">
                                                            <div class="item-icons">

                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="goods-attr">
                                                    <p class="sku-line">{{c.gradeName}}</p>
                                                </td>
                                                <td style="width: 140px" cl优惠ass="goods-price second-color">
                                                    ￥{{c.courseMarket.price}}元
                                                    <span style="text-decoration: line-through;font-size: 12px;color: #999999">{{c.courseMarket.priceOld}}元</span>
                                                </td>
                                                <td class="goods-amount">{{c.totalMinute}}</td>
                                                <td class="goods-sum">
                                                    <p class="sum second-color">{{c.watchExpireTime}}</p>
                                                </td>
                                            </tr>
                                            <!-- 如果该商品有赠品，那么当前商品的tr的class="have-gift" _end-->
                                            </tbody>
                                        </table>
                                    </td>
                                    <td class="goods-postage">
                                        <div class="postage">
                                            <label>
                                                <input type="radio" name="" value="" checked="checked">
                                                <span>普通配送</span>
                                            </label>
                                            <select class="shipping-select" data-shop-id="7">
                                                <option value="0" selected="">在线发货</option>
                                            </select>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="goods-annex">
                                    </td>
                                    <td colspan="3" class="goods-bill" id="shop_count_7">
                                        <div class="bill">
                                            <div class="order-pay">
                                                合计
                                                <span>(无其他费用)</span> ：
                                                <strong class="second-color SZY-SHOP-ORDER-AMOUNT-7" data-shop-id="7">￥{{totalAmount}}
                                                    元 | 优惠 0 元</strong>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <!-- 根据店铺对商品进行拆单 每个table是一个店铺的商品 _end-->

                        </div>
                    </div>
                </div>
                <!-- 平台红包 -->
                <!--
<div class="real-pay">
<span class="hd">应付总额：</span>
<span class="bd color SZY-ORDER-AMOUNT"></span>
</div>
-->
                <!-- <div class="obtain-point">
可获得积分：
<span>
    <strong></strong>
    点
</span>
</div> -->

                <!-- 发票信息 -->

                <!-- 支付方式 -->
                <div class="pay-type border-line">
                    <div class="main-content">
                        <h2 class="title">支付方式</h2>
                        <div class="pay-type-content">
                            <!-- 积分支付 start -->

                            <!-- 积分支付 end -->

                            <!-- 余额支付 start -->

                            <!-- 余额支付后面显示的应付款信息 -->
                            <p class="surplus-pay" id="balance_money_pay">
                                剩余应付金额
                                <strong class="second-color SZY-ORDER-MONEY-PAY">￥{{totalAmount}} 元</strong> 请选择以下支付方式支付
                            </p>

                            <!-- 银行支付方式调用 start -->
                            <div class="pay-all" id="pay_bank">

                                <ul id="paylist" class="payment-tab">

                                    <!-- 货到付款特殊处理 -->

                                    <!-- 货到付款特殊处理 -->
                                    <li class="clearfix">
                                        <label>
                                            <input v-model="orderForm.payType" type="radio" id="pac_code_1"
                                                   name="pay_code" class="pay_code" value="1">
                                            <span class="payment-name">支付宝</span>
                                        </label>
                                    </li>

                                    <!-- 货到付款特殊处理 -->
                                    <li class="clearfix">
                                        <label>
                                            <input v-model="orderForm.payType" type="radio" id="pac_code_2"
                                                   name="pay_code" class="pay_code" value="2">
                                            <span class="payment-name">银联支付</span>
                                        </label>
                                    </li>

                                    <!-- 货到付款特殊处理 -->
                                    <li class="clearfix">
                                        <label>
                                            <input v-model="orderForm.payType" type="radio" id="pac_code_3"
                                                   name="pay_code" class="pay_code" value="3">
                                            <span class="payment-name">微信支付</span>
                                        </label>
                                    </li>

                                </ul>

                            </div>
                            <!-- 银行支付方式调用 end -->
                        </div>
                    </div>
                </div>
                <!-- 提交订单 -->
                <div class="confirm-pay bottom" id="checkout_amount">

                    <div class="total-count">
                        <div class="total-count-pay">
                            <div class="total-count-pay-info">
									<span class="first">
				订单总额：
				<span class="SZY-ORDER-AMOUNT ">￥{{totalAmount}} 元</span>
									</span>
                            </div>
                            <div class="total-count-pay-info">
									<span>
				课程总额：
				<span class="SZY-GOODS-AMOUNT">￥{{totalAmount}} 元</span>
									</span>
                                <em>-</em>
                                优惠：
                                <span class="">￥0</span>
                                </span>
                                <em>-</em>
                                <span>
				余额：
				<span class="SZY-ORDER-BALANCE">￥0.00</span>
									</span>
                                <em>=</em>
                                <span class="end second-color">
				应付款：
				<span class="SZY-ORDER-MONEY-PAY">￥{{totalAmount}}</span>
									</span>
                            </div>
                        </div>
                    </div>
                    <div class="submit-box fr">
                        <!--<div class="price-box fl">
    <span>应付总额：</span>
    <span class="price color SZY-ORDER-AMOUNT">￥112.39</span>
</div>-->

                        <div class="fr">
                            <a href="javascript:void(0);" id="submitBtn"
                               @click="submitOrder" class="submit-btn gopay bg-color">提交订单</a>
                        </div>
                    </div>

                </div>
            </div>

            <!-- 新增地址弹框 -->
            <div class="bomb-box addr-box">
                <div class="box-title">使用新地址</div>
                <div class="box-oprate addr-box-oprate"></div>
                <div class="content-info" id="edit-address-div"></div>
            </div>

            <!-- 发票信息弹框 -->
            <div class="bomb-box invoice-box">
                <div class="box-title">发票信息</div>
                <div class="box-oprate invoice-box-oprate"></div>
                <div class="content-info">
                    <div class="tab-nav">
                        <ul>

                            <li class="tab-nav-item  tab-item-selected" data-invoice-type="0" data-invoice-name="不开发票">
                                不开发票
                                <b></b>
                            </li>

                            <li class="tab-nav-item disabled " data-invoice-type="1" data-invoice-name="普通发票">
                                普通发票
                                <b></b>
                            </li>

                            <li class="tab-nav-item disabled " data-invoice-type="2" data-invoice-name="增值税发票">
                                增值税发票
                                <b></b>
                            </li>

                        </ul>
                    </div>
                    <!-- 普通税发票 _star -->

                    <form id="invoice_type_0" action="#checkout.html" method="post" class="form-horizontal">
                        <div class="act">
                            <input type="button" value="保存发票信息" id="inv_submit">
                            <input type="button" value="取消" class="m-l-10" id="inv_cancle">
                        </div>
                    </form>
                    <!-- 增值税发票 _end -->

                    <!-- 增值税发票 _end -->

                    <!-- 增值税发票 _end -->
                </div>
            </div>
        </div>
    </div>

    <!-- 付款信息弹框 -->
    <div class="bomb-box payment-box">
        <div class="box-title">请付款</div>
        <div class="content-info">
            <p class="warning">
                <i></i>
                <span>请您在新打开的页面上完成付款。</span>
            </p>
            <p class="prompt">付款完成前请不要关闭此窗口</p>
            <p class="prompt">完成付款后请根据您的情况点击下面的按钮</p>
            <p class="btns">
                <a href="#checkout/result.html" class="pay_result">已完成付款</a>
                <a href="#checkout/result.html" class="m-l-10 pay_result">付款遇到问题</a>
            </p>
            <!-- <p class="back">
            <a href="/user/result/pay.html" title="返回选择其他的支付方式" class="color">&gt;&gt; 返回选择其他的支付方式</a>
        </p> -->
        </div>
    </div>

    <!-- 引入底部文件 -->

    <!-- 底部 _start-->

    <div class="site-footer">

        <div class="footer-related">

            <div class="footer-info">
                <div class="info-text">
                    <!-- 底部导航 -->
                    <p class="nav-bottom">

                    </p>
                    <p>
                        Copyright 源码时代(www.itsource.cn) 版权所有
                        <a href="http://www.miibeian.gov.cn/" target="_blank">蜀ICP备88888888号</a>
                    </p>
                </div>

            </div>

        </div>
    </div>
    <div id="payHtml"></div>
</div>
<script type="text/javascript" src="js/checkout.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/szy.cart.js"></script>
<script type="text/javascript" src="js/jquery.region.js"></script>
<!-- 表单验证 -->
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.validate.custom.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>


<script type="application/javascript">
    new Vue({
        el: "#myBody",
        data() {
            return {
                courses: [],
                totalAmount: 0,
                orderNo: "",
                orderForm: {
                    courseIds: [],
                    payType: "1",
                    type: 0,	//0代表普通订单，1代表秒杀订单
                    token: "",
                }
            }
        },
        methods: {
            //下单方法
            submitOrder() {
                var _this = this;

                if (_this.orderForm.courseIds) {
                    $("#submitBtn").attr("disabled", true);
                    $("#submitBtn").html("正在下单...");
                    let URI = "placeOrder";
                    let param = {};

                    //秒杀下单
                    if (_this.orderNo && _this.orderForm.type && _this.orderForm.type == 1) {
                        //秒杀请求
                        URI = "killPlaceOrder";
                        param = {
                            payType: _this.orderForm.payType,
                            orderNo: _this.orderNo
                        }
                    } else {
                        param = _this.orderForm;
                    }

                    //公共参数
                    param["token"] = _this.orderForm.token;

                    //普通请求
                    _this.$http.post("/order/courseOrder/" + URI, param).then(res => {
                        if (res.data.success) {
                            // 返回订单编号
                            _this.toPay(res.data.data);

                            //是否从购物车跳转过来,删除购物车
                            let fromPage = api.getQueryVariable("from");
                            if (fromPage == 'cart') {
                                _this.$http.post("/cart/courseCart/remove/", _this.orderForm.courseIds).then(res => {
                                })
                            }
                        } else {
                            $.alert(res.data.message);
                            $("#submitBtn").attr("disabled", false);
                            $("#submitBtn").html("提交订单");
                        }
                    }).catch(error => {
                        $.alert("下单失败[" + error.message + "]");
                        $("#submitBtn").attr("disabled", false);
                        $("#submitBtn").html("提交订单");
                    })
                }

            },
            toPay(orderNo) {
                var _this = this;
                //每隔  n s 发送一次请求检查支付单是否保存成功
                var interval = window.setInterval(function () {
                    if (orderNo) {
                        //提交支付的参数
                        var param = {
                            orderNo: orderNo,
                            payType: _this.orderForm.payType,
                            //支付完成跳转地址
                            callUrl: "http://127.0.0.1:6002/detail.html?courseId=" + _this.orderForm.courseIds[0]
                        };
                        //TODO : 根据订单号去查询一下支付单号了没有，如果没有好，再延迟1s中，再次查询一下。
                        _this.$http.get("/pay/payOrder/checkPayOrder/" + orderNo).then(res => {
                            if (res.data.success) {
                                //关闭定时方法
                                window.clearInterval(interval);
                                //去支付
                                _this.$http.post("/pay/pay/apply", param).then(res => {
                                    if (res.data.success) {
                                        document.write(res.data.data); //html
                                    } else {
                                        $.alert(res.data.message);
                                        $("#submitBtn").attr("disabled", false);
                                        $("#submitBtn").html("提交订单");
                                    }
                                }).catch(error => {
                                    $.alert("支付申请失败[" + error.message + "]");
                                    $("#submitBtn").attr("disabled", false);
                                    $("#submitBtn").html("提交订单");
                                })
                            }
                        }).catch(error => {

                        })
                    }
                }, 1000);

            },

            getCourse() {
                console.log(this.orderForm.courseIds)
                console.log(this.orderNo)
                console.log(this.orderForm.type)

                if (this.orderForm.courseIds) {

                    if (this.orderForm.type) {
                        //1.获取当前订单类型
                        //如果是1 发送地址请求路径和普通订单 区分
                        //发送请求到后台获取数据
                        this.$http.get("course/course/killInfo/" + this.orderNo).then(res => {
                            let {success, data, message} = res.data;
                            if (success) {
                                this.courses = res.data.data.courses
                                this.totalAmount = res.data.data.totalAmount
                            } else {
                                $.alert("订单数据加载失败[" + message + "]");
                            }

                        }).catch(error => {
                            $.alert("订单数据加载失败[" + error.message + "]");
                        })
                    } else {
                        //发送请求到后台获取数据
                        this.$http.get("course/course/info/" + this.orderForm.courseIds).then(res => {
                            let {success, data, message} = res.data;
                            if (success) {
                                this.courses = res.data.data.courses
                                this.totalAmount = res.data.data.totalAmount
                                console.log(res.data.data.courses + ":" + res.data.data.totalAmount)
                            } else {
                                $.alert("订单数据加载失败[" + message + "]");
                            }

                        }).catch(error => {
                            $.alert("订单数据加载失败[" + error.message + "]");
                        })
                    }
                }
            },


            getToken() {
                this.$http.get("/common/courseOrder/createTokenForOrder/" + this.orderForm.courseIds).then(res => {
                    let {data, success, message} = res.data;
                    if (success) {
                        this.orderForm.token = data;
                    } else {
                        $.alert("服务器异常[防重Token获取失败]");
                    }
                }).catch(error => {
                    $.alert("服务器异常[防重Token获取失败]");
                })
            }
        },
        mounted() {

            //处理课程ID
            let courseId = api.getQueryVariable("courseId");
            if (!courseId) {
                $.alert("非法请求，请重新购买");
                window.location.href = "/index.html";
            }
            //多课程下单
            if (courseId.indexOf(",")) {
                let courseIds = courseId.split(",");
                for (let i = 0; courseIds.length > i; i++) {
                    this.orderForm.courseIds.push(courseIds[i]);
                }
            } else {
                this.orderForm.courseIds.push(courseId);
            }
            //处理type，秒杀是1
            let type = api.getQueryVariable("type");
            //订单号，秒杀才有订单号
            let orderNo = api.getQueryVariable("orderNo");
            if (type && orderNo) {
                this.orderForm.type = parseInt(type);
                this.orderNo = orderNo;
            }

            //加载初始化数据
            this.getCourse();
            this.getToken();
            //this.getAddress();
        }
    });


</script>
</body>

</html>